<template>
  <div class="flex-1 flex gap-3">
    <!-- 右侧预约列表和详情区域 -->
    <div class="flex-1 bg-white rounded-lg p-3">
      <div class="flex justify-between items-center mb-3 flex-1">
        <el-form :model="searchForm" label-width="80px" inline class="flex-1">
            <el-form-item label="患者姓名" class="mb-0">
              <el-input v-model="searchForm.name" placeholder="请输入患者姓名" />
            </el-form-item>
            <el-form-item label="检查类型" class="mb-0 w-1/4">
              <el-select v-model="searchForm.type" placeholder="请选择检查类型" class="w-full">
                <el-option-group label="检查项目">
                  <el-option v-for="item in inspectOptions" 
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.value" 
                  />
                </el-option-group>
                <el-option-group label="检验项目">
                  <el-option v-for="item in testOptions" 
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.value" 
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="预约日期" class="mb-0">
              <el-date-picker
                v-model="searchForm.date"
                type="date"
                placeholder="选择日期"
                class="w-full"
              />
            </el-form-item>
            <el-form-item class="mb-0">
              <div class="flex gap-2 justify-center w-full">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        <el-button type="primary" @click="showAddDialog">新增预约</el-button>
      </div>
      <!-- 预约列表 -->
      <el-table :data="reservationList" border stripe>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="患者姓名" />
        <el-table-column prop="type" label="检查类型">
          <template #default="{ row }">
            <el-tag :type="row.category === 'inspect' ? 'success' : 'warning'">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="预约日期" />
        <el-table-column prop="time" label="预约时间" />
        <el-table-column prop="location" label="检查地点" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="info" @click="showDetail(row)">查看</el-button>
            <el-button link type="primary" @click="modifyReservation(row)">修改</el-button>
            <el-button link type="warning" @click="cancelReservation(row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <Pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/修改预约弹窗 -->
    <Drawer
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增预约' : '修改预约'"
      size="600px"
      @confirm="submitForm"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="mt-3"
      >
        <el-form-item label="患者姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="检查类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择检查类型" class="w-full">
            <el-option-group label="检查项目">
              <el-option v-for="item in inspectOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value" 
              />
            </el-option-group>
            <el-option-group label="检验项目">
              <el-option v-for="item in testOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value" 
              />
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="预约时间" prop="time">
          <el-time-select
            v-model="form.time"
            start="08:30"
            step="00:30"
            end="17:30"
            placeholder="选择时间"
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
    </Drawer>

    <!-- 预约详情弹窗 -->
    <Drawer
      v-model="detailVisible"
      title="预约详情"
      size="600px"
      :is-show-confirm="false"
    >
      <div v-if="currentDetail" class="space-y-4">
        <div class="flex items-center">
          <span class="text-gray-500 w-24">患者姓名：</span>
          <span>{{ currentDetail.name }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-500 w-24">检查类型：</span>
          <el-tag :type="currentDetail.category === 'inspect' ? 'success' : 'warning'">
            {{ currentDetail.type }}
          </el-tag>
        </div>
        <div class="flex items-center">
          <span class="text-gray-500 w-24">预约时间：</span>
          <span>{{ currentDetail.date }} {{ currentDetail.time }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-500 w-24">检查地点：</span>
          <span>{{ currentDetail.location }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-500 w-24">状态：</span>
          <el-tag :type="getStatusType(currentDetail.status)">
            {{ getStatusText(currentDetail.status) }}
          </el-tag>
        </div>
        <div class="border-t pt-4 mt-4">
          <h3 class="font-medium mb-2">注意事项：</h3>
          <div class="bg-gray-50 p-4 rounded text-gray-600">
            <p v-if="currentDetail.category === 'inspect'">
              1. 检查前请空腹6-8小时<br>
              2. 穿着宽松舒适的衣物<br>
              3. 请提前15分钟到达检查地点<br>
              4. 请携带身份证和就诊卡
            </p>
            <p v-else>
              1. 检验前请空腹12小时<br>
              2. 避免剧烈运动<br>
              3. 准时到达采血室<br>
              4. 请携带身份证和就诊卡
            </p>
          </div>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 搜索表单
const searchForm = reactive({
  name: '',
  type: '',
  date: ''
});

// 检查项目选项
const inspectOptions = [
  { value: 'CT', label: 'CT检查' },
  { value: 'MRI', label: 'MRI检查' },
  { value: 'B超', label: 'B超检查' },
  { value: 'X光', label: 'X光检查' },
  { value: '心电图', label: '心电图检查' }
];

// 检验项目选项
const testOptions = [
  { value: '血常规', label: '血常规' },
  { value: '尿常规', label: '尿常规' },
  { value: '生化全套', label: '生化全套' },
  { value: '甲功', label: '甲状腺功能' },
  { value: '凝血', label: '凝血功能' }
];

// 表格数据
const reservationList = ref([
  {
    name: '张三',
    type: 'CT',
    category: 'inspect',
    date: '2024-01-20',
    time: '09:30',
    location: '放射科CT室',
    status: 'pending'
  },
  {
    name: '李四',
    type: '血常规',
    category: 'test',
    date: '2024-01-20',
    time: '10:00',
    location: '检验科采血室',
    status: 'confirmed'
  }
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(reservationList.value.length);

// 弹窗控制
const dialogVisible = ref(false);
const dialogType = ref('add');
const detailVisible = ref(false);
const currentDetail = ref(null);

// 表单
const formRef = ref();
const form = reactive({
  name: '',
  type: '',
  date: '',
  time: '',
  remark: ''
});

// 表单校验规则
const rules = {
  name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  type: [{ required: true, message: '请选择检查类型', trigger: 'change' }],
  date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
  time: [{ required: true, message: '请选择预约时间', trigger: 'change' }]
};

// 搜索
const search = () => {
  // TODO: 实现搜索逻辑
  ElMessage.success('搜索成功');
};

// 重置搜索
const resetSearch = () => {
  searchForm.name = '';
  searchForm.type = '';
  searchForm.date = '';
};

// 显示新增弹窗
const showAddDialog = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  form.name = '';
  form.type = '';
  form.date = '';
  form.time = '';
  form.remark = '';
};

// 显示修改弹窗
const modifyReservation = (row) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  Object.assign(form, row);
};

// 显示详情
const showDetail = (row) => {
  currentDetail.value = row;
  detailVisible.value = true;
};

// 取消预约
const cancelReservation = (row) => {
  ElMessageBox.confirm(
    '确定要取消该预约吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 实现取消预约逻辑
    ElMessage.success('取消预约成功');
  }).catch(() => {});
};

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;
  
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // TODO: 实现提交逻辑
      ElMessage.success(dialogType.value === 'add' ? '新增预约成功' : '修改预约成功');
      dialogVisible.value = false;
    }
  });
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  // TODO: 重新加载数据
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  // TODO: 重新加载数据
};

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    confirmed: 'success',
    completed: 'info',
    cancelled: 'danger'
  };
  return types[status] || 'info';
};

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待确认',
    confirmed: '已确认',
    completed: '已完成',
    cancelled: '已取消'
  };
  return texts[status] || '未知';
};
</script>

<style scoped>
.el-tag {
  text-align: center;
}

.el-table {
  margin-bottom: 20px;
}
</style>